<template>
  <div>
    <Drawer v-model="taskLog" title="同步日志" width="60%" :closable="true" :mask-closable="true" @on-close="close">
      <codemirror v-model="taskInfo.log" :options="cmOptions"></codemirror>
    </Drawer>
  </div>
</template>

<script>
import { codemirror } from 'vue-codemirror'
import 'codemirror/mode/javascript/javascript.js'
import 'codemirror/theme/duotone-light.css'
import 'codemirror/theme/paraiso-light.css'
import 'codemirror/theme/lucario.css'
import 'codemirror/theme/mdn-like.css'
import 'codemirror/theme/monokai.css'
import 'codemirror/mode/nginx/nginx.js'
export default {
  name: 'TaskLog',
  components: { codemirror },
  props: {
    taskInfo: {
      type: Object,
      default() {
        return {}
      }
    },
    taskLog: {
      type: Boolean,
      default: false,
      require: true
    }
  },
  data() {
    return {
      cmOptions: {
        // codemirror options
        tabSize: 2,
        indentUnit: 4,
        theme: 'default',
        lineNumbers: true,
        line: true,
        readOnly: true,
        lineWrapping: true,
        gutters: ['CodeMirror-lint-markers']
      }
    }
  },
  mounted() {},
  methods: {
    close() {
      this.$emit('on-task-log-close')
    }
  }
}
</script>

<style lang='scs' scoped>
</style>
<style>
.CodeMirror {
  height: 600px;
}
.CodeMirror-scroll {
  height: 600px;
  overflow-y: auto;
  overflow-x: auto;
}
</style>
